<script setup>
import {Comment, Lock, UserFilled, View} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {getCode, login} from '/src/API/Login.js'
import {useUsername} from '/src/store/username.js'
import router from "../../router/index.js";
// Pinia仓库
let {usernameInfo} = useUsername()
// 表单信息
const form = ref({
  account: 'demo',
  password: 'hm#qd@23!',
  code: '',
  key: 'QNda'
})

// 获取图片验证码
// 二进制转图片地址显示
let imgUrl = ref()

async function codeImg() {
  imgUrl.value = await getCode()
  // 将接口返回的图片二进制流转为 blob 显示
  imgUrl.value = URL.createObjectURL(imgUrl.value)
}

onMounted(() => {
  codeImg()
})
// 实现点击查看密码
const passwordView = ref()
let passwordViewValue = ref(1)

function passwordViews(value) {
  if (value) {
    passwordView.value.input.type = 'text'
    passwordViewValue.value = 0
  } else {
    passwordView.value.input.type = 'password'
    passwordViewValue.value = 1
  }
}

// 登录功能
async function validateLogon(formEl) {
  await formEl.validate()
  const res = await login(form.value)
  if (res.msg === 'ok') {
    ElMessage.success('登录成功')
    usernameInfo.user = res.data.user
    usernameInfo.token = res.data.token
    localStorage.setItem('token', JSON.stringify(res.data.token.token))
    localStorage.setItem('userData', JSON.stringify(res.data.user))
    await router.push('/')
  }
}

// 校验规则
const ruleFormRef = ref()
const rules = reactive({
  account: [
    {required: true, message: '用户名不能为空', trigger: 'change'},
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'change'},
  ],
  code: [
    {required: true, message: '验证码不能为空', trigger: 'change'},
  ],
})
</script>

<template>
  <div class="login-box">
    <div>
      <video autoplay loop muted>
        <source src="/src/assets/video/video.mp4" type="video/mp4">
      </video>
    </div>
    <div class="formBox">
      <img src="https://fe-slwl-manager.itheima.net/static/img/logo1.33ef7fa0.png" alt="" width="200px">
      <el-form
          :model="form"
          ref="ruleFormRef"
          :rules="rules"
      >
        <!--        用户名-->
        <el-form-item prop="account">
          <el-input type="text" v-model="form.account">
            <template #prefix>
              <el-icon>
                <UserFilled/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!--        密码-->
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" ref="passwordView">
            <template #suffix>
              <el-icon class="ViewIcon" @click="passwordViews(passwordViewValue)">
                <View/>
              </el-icon>
            </template>
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!--        验证码-->
        <el-form-item prop="code">
          <el-input type="text" v-model="form.code">
            <template #prefix>
              <el-icon>
                <Comment/>
              </el-icon>
            </template>
            <template #suffix>
              <img class="codeImg" :src="imgUrl" alt="验证码" @click="codeImg()">
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <button class="loginBtn" @click="validateLogon(ruleFormRef)">登录</button>
      <div class="loginText">
        <p>为保障您的个人信息安全，请勿向平台录入任何个人敏感信息 (如手机号、身份证号等)!</p>
      </div>
    </div>
  </div>

</template>

<style scoped lang="less">
.login-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.formBox {
  text-align: center;
  padding: 20px 40px;
  width: 350px;
  height: 500px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 999;
  background-color: #fff;
  border-radius: 10px;

  img {
    margin: 20px 0;
  }

  .el-input {
    margin-top: 10px;
    height: 50px;
  }

  i, svg {
    width: 20px;
    height: 20px;
  }
}

::v-deep(.ViewIcon), .codeImg {
  cursor: pointer;
}

.loginBtn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
  background-color: #e15536;
  color: #fff;
  border: none;
}

.loginText {
  line-height: 25px;
  margin-top: 20px;
  font-size: 12px;
  color: #ff003f;
  text-align: left;
}
</style>
